<template>
  <div class="page-box">
    <div class="page-search">

      <div>
        <label>工作站编码</label>
        <el-input v-model="searchForm.WorkstationCode" style="width: 160px;"></el-input>
      </div>
      <div>
        <label>工作站名称</label>
        <el-input v-model="searchForm.WorkstationName" style="width: 160px;"></el-input>
      </div>
      <div>
        <label>车间名称</label>
        <el-select v-model="searchForm.WorkshopId" style="width: 160px;" placeholder="请选择车间" allow-create filterable>
          <el-option v-for="Workshop in WorkshopList" :key="Workshop.Id" :label="Workshop.WorkshopName"
            :value="Workshop.Id"></el-option>
        </el-select>


      </div>
      <div>
        <label>所属工序</label>

        <el-select v-model="searchForm.ProcessId" style="width: 160px;" placeholder="请选择工序" allow-create filterable>
          <el-option v-for="ProProcess in ProProcessList" :key="ProProcess.Id" :label="ProProcess.ProcessName"
            :value="ProProcess.Id"></el-option>
        </el-select>


      </div>



      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>



    <div class="page-section">

      <div class="page-tool">
        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
        <el-dropdown class="mg-l">
          <el-button size="small" type="primary" plain>
            <i class="el-icon-s-grid"></i>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>


      <!--表单-->

      <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="WorkstationCode" label="工作站编码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="WorkstationName" label="工作站名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="WorkstationAddress" label="工作站地点" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="WorkshopName" label="所在车间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ProcessName" label="所属工序" :show-overflow-tooltip="true"></el-table-column>


        <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.EnableFlag === 'Y'">是</el-tag>
            <el-tag type="warning" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
            <el-button type="text" @click="details(scope.row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
    </div>


    <!--弹窗-->
    <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
      width="60%" @close="closeDialog">
      <WorkstationInput :WorkshopList="WorkshopList" :ProProcessList="ProProcessList" :model="model"
        :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible&& dialogDomain.dialogType==0" />
      <WorkstationDetails :model="model" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==1" />

    </el-dialog>
  </div>
</template>

<script>

import WorkstationInput from './components/WorkstationInput.vue';
import WorkstationDetails from './components/WorkstationDetails.vue';
import Pagination from '@/components/Pagination.vue';

export default {
  components: {
    WorkstationInput,
    Pagination,
    WorkstationDetails

  },
  mounted() {
        this.dataBind();

    },
  data() {
    return {
      WorkshopList:[],
      ProProcessList:[],
      searchForm: {
        WorkstationCode: '',
        WorkstationName: '',
        WorkshopId: '',
        ProcessId: '',

      },

      dialogDomain: {
        title: '新增工作站',
        dialogVisible: false,
        dialogType:0
        
      },
      isUpdate: false,
      //数据模型
      model: {
        WorkstationCode: '',
        WorkstationName: '',
        WorkstationAddress: '',
        WorkshopId: '',
        WorkshopCode:'',
        WorkshopName:'',
        ProcessId: '',
        ProcessCode:'',
        ProcessName:'',
        EnableFlag: 'Y',
        Remark: '',

      },
      pageDomain: {
        PageIndex: 1,
        PageSize: 10,
        TotalCount: 0
      },
      tableData:[],
      isLoading:false,



    }
  },
  created(){
      this.GetWorkstationSelectData();
  },
  methods: {
    add() {
      this.dialogDomain.title = "新增工作站";
      this.dialogDomain.dialogVisible = true;
      this.dialogDomain.dialogType=0;

      this.isUpdate = false;
    },
    update(model) {
      this.dialogDomain.title = "编辑工作站";
      this.dialogDomain.dialogVisible = true;
      this.dialogDomain.dialogType=0;

      this.isUpdate = true;

      console.log(model);
      this.model = model;
    },
    details(model){
            this.dialogDomain.title = "工作站明细";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType=1;
            this.model = model;
        },

     //批量删除
        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    //获取选中的表格数据 并筛选id
                    var ids = this.$refs.dataForm.selection.map(x => x.Id)

                    //拼接参数
                    let params = new URLSearchParams();
                    params.append('ids', ids.join(','))

                    this.$http.delete('/api/Workstation/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });

        },

        //删除单条
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/api/Workstation', {
                        data: {
                            id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
    
    //对话框关闭事件
    closeDialog() {
      this.model = {
        WorkstationCode: '',
        WorkstationName: '',
        WorkstationAddress: '',
        WorkshopId: '',
        WorkshopCode:'',
        WorkshopName:'',
        ProcessId: '',
        ProcessCode:'',
        ProcessName:'',
        EnableFlag: 'Y',
        Remark: '',
      }
    },
   


    search() {
      this.pageDomain.PageIndex = 1;
      this.dataBind();
    },
    reset() {
      this.searchForm.WorkstationCode = '';
      this.searchForm.WorkstationName = '';
      this.searchForm.WorkshopId = '';
      this.searchForm.ProcessId = '';
    },
//新增或编辑页面回调
    callback() {
      let actionName = this.isUpdate ? '编辑' : '新增';
      this.showNotify(actionName + '工作站成功', 'success');
      this.dialogDomain.dialogVisible = false;
      this.dataBind();
    },
    //获取数据
    dataBind() {
            this.isLoading = true;
            this.$http.get('/api/Workstation',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        WorkstationCode: this.searchForm.WorkstationCode,
                        WorkstationName: this.searchForm.WorkstationName,
                        WorkshopId: this.searchForm.WorkshopId,
                        ProcessId: this.searchForm.ProcessId,
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        GetWorkstationSelectData(){
          this.$http.get('./api/Integrated/GetWorkstationSelectData')
          .then(res=>{
            console.log(res.Data);
            this.WorkshopList=res.Data.WorkshopList;
            this.ProProcessList=res.Data.ProProcessList;
          })
        },
    //分页方法
    handleSizeChange(val) {
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val) {
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },

    exports() {
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
        confirmButtonText: '导出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.request({
          method: "GET",
          loading: this.$loading(),
          url: "/api/Workstation/Export",
          responseType: 'blob'
        }).then((res) => {
          const blob = new Blob([res])
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = '工作站信息.xls'; //下载后文件名
          downloadElement.click(); //点击下载
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })


      }).catch((err) => {
        console.log(err);
      })

    },


  }
}
</script>

<style></style>